<template>
	<view class="swith" :class="{isflag:!flag}" @tap="myswitch">
		<view class="circle" :class="{isflag:flag}" :animation="animationData"  >
			
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			flag:{
				type:Boolean,
				default:true
			}
		},
		data() {
			return {
				 animationData: {},
			};
		},
		methods:{
			myswitch(){
			   this.$emit('changeisrecived',!this.flag)
			}
		},
		watch:{
			flag(newval,oldval){
				var animation = uni.createAnimation({
				  duration: 300,
				  timingFunction: 'ease',
				})
				if(newval){
					animation.translateX(19).step()	
				}else{
					animation.translateX(0).step()	
				}		    		
				this.animationData = animation.export()
			}
		}
	}
</script>

<style lang="scss">
.swith{
	width: 82rpx;
	height: 45rpx;
	background-color: rgba(52, 199, 88, 100);
	border-radius: 60rpx;
	box-sizing: border-box;
	padding: 2rpx;
	transition: all .3s ease;
	&.isflag{
		background-color: rgba(229, 229, 234, 100);
	}
	.circle{
		height: 41rpx;
		width: 41rpx;
		border-radius: 50%;
		background-color: #FFFFFF;
		transition: all .3s ease;
		&.isflag{
			transform: translateX(19px);
		}
	}
}
</style>
